<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>文章详情</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"
          href="../../static/layui/css/layui.css"/>
    <link rel="stylesheet" th:href="@{/styles/articles/detail.css}"
          href="../../static/styles/articles/detail.css"/>
    <link rel="stylesheet" th:href="@{/styles/articles/index.css}"
          href="../../static/styles/articles/index.css"/>
    <link rel="stylesheet" th:href="@{/resources/editor.md/css/editormd.css}"
          href="../../static/resources/editor.md/css/editormd.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="/share/_header :: header(2)"></div>

    <div class="layui-body body-content">
        <div role="main" class="container" style="margin-top: 1rem;">
            <div class="row">
                <div class="col-sm-9 blog-main">
                    <div class="blog-post">
                        <img src="http://via.placeholder.com/60x60" class="rounded-circle"
                             th:alt="${post.user.username}">
                        <div class="blog-intro">
                            <p class="font-weight-bold">[[${post.title}]]</p>
                            <p class="blog-post-meta">
                                [[${post.createTime}]] by <a href="#">[[${post.user.username}]]</a>
                            </p>
                        </div>
                    </div>

                    <div id="editormd">
                        <textarea name="content" id="content" rows="3">[[${post.content}]]</textarea>
                    </div>

                    <div class="comments">
                        <fieldset class="layui-elem-field layui-field-title comments-title" style="text-align: center;">
                            <legend>回复</legend>
                        </fieldset>
                        <div class="edit-comment" th:if="${session.SPRING_SECURITY_CONTEXT != null }">
                            <form id="title" th:action="@{/posts/{postId}/replies(postId=${post.id})}" method="post"
                                  onsubmit="saveReply();">
                                <div class="form-group" id="replyEditormd">
                                    <textarea class="form-control" name="content" rows="3"></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">提交</button>
                            </form>
                        </div>
                        <div id="comments-list">
                            <div class="blog-post" th:each="reply : ${replies}">
                                <a th:name="${'reply_' + reply.id}"></a>
                                <img src="http://via.placeholder.com/60x60" class="rounded-circle"
                                     alt="${reply.user.username}">
                                <div class="blog-intro">
                                    <p class="blog-post-meta">
                                        [[${reply.createTime}]] by <a href="#">[[${reply.user.username}]]</a>
                                    </p>
                                    <div class="blog-post-action">
                                        <a><i class="layui-icon">&#xe6c6;</i> 123</a>
                                        <a><i class="layui-icon">&#xe6c6;</i> 回复</a>
                                    </div>
                                    <div class="markdown-body editormd-html-preview" style="padding: 0 0 10px;"
                                         th:utext="${reply.content}"></div>
                                </div>
                            </div>
                        </div>
                        <!-- ${not #lists.isEmpty()} -->
                        <div id="repliesPaging"
                             th:attr="data-size=${curSize}, data-page=${curPage}, data-total-count=${totalCount}">
                            <nav class="blog-pagination" aria-label="Page navigation example" th:if="${totalPage>0}">
                                <ul class="pagination">
                                    <li th:class="${curPage == 1 ? 'page-item disabled' : 'page-item' }">
                                        <a class="page-link"
                                           th:href="@{/posts/{postId}(postId=${post.id}, page=${curPage-1})}">上一页</a>
                                    </li>
                                    <!-- 总页数 <= 7 -->
                                    <th:blcok th:if="${totalPage <= 7}" th:remove="tag">
                                        <th:block th:each="i : ${#numbers.sequence(1, totalPage)}">
                                            <li th:class="${i == curPage ? 'page-item active' : 'page-item' }">
                                                <a class="page-link"
                                                   th:href="@{/posts/{postId}(postId=${post.id}, page=${curPage-1+i})}">[[${i}]]</a>
                                            </li>
                                        </th:block>
                                    </th:blcok>
                                    <!-- 总页数 > 7 -->
                                    <th:block th:if="${totalPage > 7}" th:remove="tag">
                                        <!-- 当前页数 <= 3 -->
                                        <th:block th:if="${curPage <= 3}" th:remove="tag">
                                            <th:block th:each="i : ${#numbers.sequence(1, 7)}">
                                                <li th:class="${i == curPage ? 'page-item active' : 'page-item' }">
                                                    <a class="page-link"
                                                       th:href="@{/posts/{postId}(postId=${post.id}, page=${curPage-1+i})}">[[${i}]]</a>
                                                </li>
                                            </th:block>
                                        </th:block>

                                        <!-- 当前页数 > 3 -->
                                        <th:block th:if="${curPage > 3}" th:remove="tag">
                                            <th:block th:each="i : ${#numbers.sequence(curPage - 3, curPage - 1)}">
                                                <li class="page-item">
                                                    <a class="page-link"
                                                       th:href="@{/posts/{postId}(postId=${post.id}, page=${i})}">[[${i}]]</a>
                                                </li>
                                            </th:block>
                                            <li class="page-item active">
                                                <a class="page-link"
                                                   th:href="@{/posts/{postId}(postId=${post.id}, page=${curPage})}">[[${curPage}]]</a>
                                            </li>
                                            <th:block th:each="i : ${#numbers.sequence(curPage + 1, curPage + 3)}">
                                                <li class="page-item">
                                                    <a class="page-link"
                                                       th:href="@{/posts/{postId}(postId=${post.id}, page=${i})}">[[${i}]]</a>
                                                </li>
                                            </th:block>
                                        </th:block>
                                    </th:block>
                                    <li th:class="${curPage == totalPage ? 'page-item disabled' : 'page-item' }">
                                        <a class="page-link"
                                           th:href="@{/posts/{postId}(postId=${post.id}, page=${curPage+1})}">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>

                <aside class="col-sm-3 ml-sm-auto blog-sidebar">
                    <div class="sidebar-module sidebar-module-inset">
                        <h4>发贴须知</h4>
                        <p>
                            Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras
                            mattis consectetur purus sit amet fermentum. Aenean lacinia
                            bibendum nulla sed consectetur.
                        </p>
                    </div>
                    <div class="sidebar-module">
                        <h4>Archives</h4>
                        <ol class="list-unstyled">
                            <li><a href="#">March 2014</a></li>
                            <li><a href="#">February 2014</a></li>
                            <li><a href="#">January 2014</a></li>
                            <li><a href="#">December 2013</a></li>
                            <li><a href="#">November 2013</a></li>
                            <li><a href="#">October 2013</a></li>
                        </ol>
                    </div>
                    <div class="sidebar-module">
                        <h4>Elsewhere</h4>
                        <ol class="list-unstyled">
                            <li><a href="#">GitHub</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Facebook</a></li>
                        </ol>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/layui/layui.js}" src="../../static/layui/layui.js" charset="utf-8"></script>
<script th:src="@{/resources/editor.md/lib/marked.min.js}" src="../../static/resources/editor.md/lib/marked.min.js"
        charset="utf-8"></script>
<script th:src="@{/resources/editor.md/lib/prettify.min.js}" src="../../static/resources/editor.md/lib/prettify.min.js"
        charset="utf-8"></script>
<script th:src="@{/resources/editor.md/lib/raphael.min.js}" src="../../static/resources/editor.md/lib/raphael.min.js"
        charset="utf-8"></script>
<script th:src="@{/resources/editor.md/lib/underscore.min.js}"
        src="../../static/resources/editor.md/lib/underscore.min.js" charset="utf-8"></script>
<script th:src="@{/resources/editor.md/lib/sequence-diagram.min.js}"
        src="../../static/resources/editor.md/lib/sequence-diagram.min.js" charset="utf-8"></script>
<script th:src="@{/resources/editor.md/lib/flowchart.min.js}"
        src="../../static/resources/editor.md/lib/flowchart.min.js" charset="utf-8"></script>
<script th:src="@{/resources/editor.md/lib/jquery.flowchart.min.js}"
        src="../../static/resources/editor.md/lib/jquery.flowchart.min.js" charset="utf-8"></script>
<script th:src="@{/resources/editor.md/editormd.js}" src="../../static/resources/editor.md/editormd.js"
        charset="utf-8"></script>
<script th:src="@{/styles/commons/paging.js}" src="../../static/styles/commons/paging.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['element', 'layer']);

    var editor = editormd.markdownToHTML("editormd", {
        path: "/resources/editor.md/lib/",
        htmlDecode: "style, script, iframe",  // you can filter tags decode
        emoji: true,
        taskList: true,
        tex: true,  // 默认不解析
        flowChart: true,  // 默认不解析
        sequenceDiagram: true,  // 默认不解析
    });

    var replyEditormd = editormd("replyEditormd", {
        width: "100%",
        height: 300,
        path: "/resources/editor.md/lib/",
        watch: false,
        emoji: true,
        saveHTMLToTextarea: true,
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        toolbarIcons: function () {
            return [
                "bold", "del", "italic", "quote", "|",
                "h1", "h2", "h3", "h4", "h5", "h6", "|",
                "list-ul", "list-ol", "hr", "|",
                "image", "link", "code", "code-block", "emoji", "||",
                "fullscreen", "watch", "preview"
            ]
        }
    });

    function saveReply() {
        event.preventDefault();
        replyEditormd.state.preview = true;
        replyEditormd.save();

        var form = event.target;
        var content = replyEditormd.previewContainer.html();
        console.log('content = ', content);
        /* form.content.value = replyEditormd.getHTML();
        if(form.content.value.length == 0) {
            layui.layer.msg('文章内容不能为空');
            return false;
        } */
        var formData = new FormData(form);
        formData.set("content", content);
        $.ajax(form.action, {
            type: 'post',
            dataType: "json", //预期服务器返回的数据类型
            contentType: false,
            processData: false,
            data: formData,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layui.layer.msg('删除出错了');
            },
            success: function (data, textStatus, jqXHR) {
                replyEditormd.clear();
                var articleDiv = '<div class="blog-post">' +
                    '<a name="reply_' + data.id + '"></a>' +
                    '<img src="http://via.placeholder.com/60x60" class="rounded-circle" alt="aaaa">' +
                    '<div class="blog-intro">' +
                    '<p class="blog-post-meta">' +
                    data.createTime + 'by <a href="#">' + data.user.username + '</a>' +
                    '</p>' +
                    '<div class="blog-post-action">' +
                    '<a><i class="layui-icon">&#xe6c6;</i> 123</a>' +
                    '<a><i class="layui-icon">&#xe6c6;</i> 回复</a>' +
                    '</div>' +
                    '<div class="markdown-body editormd-html-preview"  style="padding: 0 0 10px;">' + data.content + '</div>' +
                    '</div>' +
                    '</div>';

                var commentsList = $('#comments-list');
                var repliesPaging = $('#repliesPaging');
                var size = repliesPaging.data('size');
                var totalCount = repliesPaging.data('totalCount');
                totalCount = parseInt(totalCount) + 1;
                size = parseInt(size);
                commentsList.prepend(articleDiv);

                var commentListDiv = commentsList.children('.blog-post');
                console.log(commentListDiv);
                console.log(commentListDiv.length);
                if (commentListDiv.length > size) {
                    commentListDiv[size].remove();
                }
                repliesPaging.paging({
                    pageNo: 1,
                    totalPage: Math.ceil(totalCount / size)
                });

                repliesPaging.data('totalCount', totalCount);
                layui.layer.msg('评论成功');
            }
        });

        return false;
    }
</script>
</body>
</html>